<template>
	<div class="hospital-area">
		<div class="title">地区：</div>
		<ul class="area-list">
			<li class="active">全部</li>
			<li>东城区</li>
			<li>西城区</li>
			<li>朝阳区</li>
			<li>丰台区</li>
			<li>石景山区</li>
			<li>海淀区</li>
			<li>门头沟区</li>
			<li>房山区</li>
			<li>通州区</li>
			<li>顺义区</li>
			<li>昌平区</li>
			<li>大兴区</li>
			<li>怀柔区</li>
			<li>平谷区</li>
			<li>密云区</li>
			<li>延庆区</li>
		</ul>
	</div>
</template>

<script lang="ts">
	export default {
		name: 'HospitalArea',
	};
</script>

<script setup lang="ts"></script>

<style scoped lang="scss">
	.hospital-area {
		margin-bottom: 20px;
		display: flex;

		.title {
			flex-shrink: 0;
		}

		.area-list {
			display: flex;
			flex-wrap: wrap;

			.active {
				color: #6fbaff;
			}

			li {
				padding: 0 10px 10px;
			}

			li:hover {
				cursor: pointer;
				color: #6fbaff;
			}
		}
	}
</style>
